<section class="content-header">
  <h1>User Profile</h1>
</section>
<section class="content">
  <form novalidate #form="ngForm" (ngSubmit)="updateProfile(form)" *ngIf="userInfo">
    <div class="form-group">
      <label>Full Name</label>
      <input type="text" class="form-control" readonly value="{{userInfo.FullName}}">
    </div>
    <div class="form-group">
      <label>Department</label>
      <input type="email" class="form-control" readonly value="{{userInfo.Department}}">
    </div>
    <div class="form-group" [class.has-error]="form.submitted && emailInput.invalid">
      <label>Email</label>
      <input type="email" class="form-control" #emailInput="ngModel" name="email" [(ngModel)]="userInfo.Email" pattern="^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$" autocomplete="off">
      <span class="help-block" *ngIf="form.submitted && emailInput.errors?.pattern">Invaliid email address.</span>
    </div>
    <!--<div class="form-group">
      <label>Avatar</label>
      <input type="file" class="form-control">
    </div>-->
    <div class="form-group">
      <button type="submit" class="btn btn-flat bg-olive">Save</button>
    </div>
  </form>
</section>